import React, { PureComponent, Fragment } from 'react';
import {
  Row,
  Card,
  Col,
  Form,
  Button,
  Input,
  InputNumber,
  DatePicker,
  Table,
  Select,
  Icon,
  Divider,
  Popconfirm,
  Modal,
  message,
  Alert,
  AutoComplete,
  Descriptions,
} from 'antd';
import moment from 'moment';
import { getAuthority } from '@/utils/authority';
import RenderAuthorized from '@/components/Authorized';
import { formatMDate } from '@/utils/dateFormat';
import { connect } from 'dva';

const FormItem = Form.Item;
const Option = Select.Option;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const Authorized = RenderAuthorized(getAuthority());
const noMatch = <Alert message={`权限不足(当前权限:${getAuthority()})`} type="error" showIcon />;
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 },
};
const formItemFullLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 20 },
};
function decimalValidator(rule, val, callback) {
  if (!val) {
    callback();
  }
  var patrn = /^\d+(\.\d+)?$/;
  let validateResult = !patrn.exec(val); // 自定义规则
  if (validateResult) {
    callback('请输入正确的数字！');
  }
  callback();
}
const ReportForm = Form.create()(props => {
  const {
    form,
    modalVisible,
    handleModalVisible,
    handleSearchRoad,
    handleAdd,
    roadNameList,
    sourceList,
  } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };

  const handleLongChange = value => {
    const { getFieldValue } = form;
    let wide = getFieldValue('Wide');

    form.setFieldsValue({ Area: value * wide });
  };

  const handleWideChange = value => {
    const { getFieldValue } = form;
    let long = getFieldValue('Long');

    form.setFieldsValue({ Area: value * long });
  };

  return (
    <Modal
      width={800}
      destroyOnClose
      title="养护上报"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <Row gutter={24}>
        <Col span={12}>
          <FormItem {...formItemLayout} label="道路名称">
            {form.getFieldDecorator('RoadName', {
              rules: [{ required: true, message: '道路名称不能为空！' }],
            })(
              <AutoComplete
                dataSource={[...roadNameList]}
                onSearch={handleSearchRoad}
                placeholder="请输入"
                style={{ width: '100%' }}
              >
                <Input />
              </AutoComplete>
            )}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="详细位置">
            {form.getFieldDecorator('Position')(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="长（m）">
            {form.getFieldDecorator('Long', {
              initialValue: 0,
              rules: [
                { validator: decimalValidator, message: '小数点最多保留两位！' },
                { required: false },
              ],
            })(
              <InputNumber
                style={{ width: '100%' }}
                step={0.01}
                placeholder="请输入"
                onChange={handleLongChange}
              />
            )}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="宽（m）">
            {form.getFieldDecorator('Wide', {
              initialValue: 0,
              rules: [
                { validator: decimalValidator, message: '小数点最多保留两位！' },
                { required: false },
              ],
            })(
              <InputNumber
                style={{ width: '100%' }}
                step={0.01}
                placeholder="请输入"
                onChange={handleWideChange}
              />
            )}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="面积（m²）">
            {form.getFieldDecorator('Area', {
              initialValue: 0,
              rules: [
                { validator: decimalValidator, message: '小数点最多保留两位！' },
                { required: false },
              ],
            })(<InputNumber style={{ width: '100%' }} step={0.01} placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="侧石（m）">
            {form.getFieldDecorator('CS', {
              initialValue: 0,
              rules: [
                { validator: decimalValidator, message: '小数点最多保留两位！' },
                { required: false },
              ],
            })(<InputNumber style={{ width: '100%' }} step={0.01} placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="平石（m）">
            {form.getFieldDecorator('PS', {
              initialValue: 0,
              rules: [
                { validator: decimalValidator, message: '小数点最多保留两位！' },
                { required: false },
              ],
            })(<InputNumber style={{ width: '100%' }} step={0.01} placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="来源">
            {form.getFieldDecorator('Source', { initialValue: '任务单' })(
              <Select style={{ width: '100%' }}>
                {sourceList.length > 0
                  ? sourceList.map(item => {
                      return (
                        <Option key={item.Id} value={item.Alias}>
                          {item.Title}
                        </Option>
                      );
                    })
                  : null}
              </Select>
            )}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="损坏情况">
            {form.getFieldDecorator('DamageCondition')(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="完成日期">
            {form.getFieldDecorator('CompleteDate', {
              rules: [{ required: true, message: '完成日期不能为空！' }],
            })(<DatePicker style={{ width: '100%' }} />)}
          </FormItem>
        </Col>
        <Col span={24}>
          <FormItem label="维修方式" className="mode" {...formItemFullLayout}>
            {form.getFieldDecorator('MaintainMode')(<TextArea placeholder="请输入" />)}
          </FormItem>
        </Col>
      </Row>
    </Modal>
  );
});

const EditForm = Form.create({
  mapPropsToFields(props) {
    if (props.data.Data != undefined) {
      const rxd = props.data.Data.RXD;
      if (rxd != undefined) {
        return {
          RoadName: Form.createFormField({ value: rxd.RoadName }),
          Position: Form.createFormField({ value: rxd.Position }),
          Long: Form.createFormField({ value: rxd.Long }),
          Wide: Form.createFormField({ value: rxd.Wide }),
          Area: Form.createFormField({ value: rxd.Area }),
          CS: Form.createFormField({ value: rxd.CS }),
          PS: Form.createFormField({ value: rxd.PS }),
          Source: Form.createFormField({ value: rxd.Source }),
          DamageCondition: Form.createFormField({ value: rxd.DamageCondition }),
          MaintainMode: Form.createFormField({ value: rxd.MaintainMode }),
          CompleteDate: Form.createFormField({ value: moment(rxd.CompleteDate) }),
        };
      }
    }
  },
})(props => {
  const {
    form,
    modalVisible,
    handleModalVisible,
    handleSearchRoad,
    handleEdit,
    data,
    roadNameList,
    sourceList,
  } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleEdit({ ...fieldsValue, Id: props.data.Data.RXD.Id });
    });
  };

  const handleLongChange = value => {
    const { getFieldValue } = form;
    let wide = getFieldValue('Wide');

    form.setFieldsValue({ Area: value * wide });
  };

  const handleWideChange = value => {
    const { getFieldValue } = form;
    let long = getFieldValue('Long');

    form.setFieldsValue({ Area: value * long });
  };

  return (
    <Modal
      width={800}
      destroyOnClose
      title="编辑详情"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <Row gutter={24}>
        <Col span={12}>
          <FormItem {...formItemLayout} label="道路名称">
            {form.getFieldDecorator('RoadName', {
              rules: [{ required: true, message: '道路名称不能为空！' }],
            })(
              <AutoComplete
                dataSource={[...roadNameList]}
                onSearch={handleSearchRoad}
                placeholder="请输入"
                style={{ width: '100%' }}
              >
                <Input />
              </AutoComplete>
            )}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="详细位置">
            {form.getFieldDecorator('Position')(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="长（m）">
            {form.getFieldDecorator('Long', {
              initialValue: 0,
              rules: [
                { validator: decimalValidator, message: '小数点最多保留两位！' },
                { required: false },
              ],
            })(
              <InputNumber
                style={{ width: '100%' }}
                step={0.01}
                placeholder="请输入"
                onChange={handleLongChange}
              />
            )}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="宽（m）">
            {form.getFieldDecorator('Wide', {
              initialValue: 0,
              rules: [
                { validator: decimalValidator, message: '小数点最多保留两位！' },
                { required: false },
              ],
            })(
              <InputNumber
                style={{ width: '100%' }}
                step={0.01}
                placeholder="请输入"
                onChange={handleWideChange}
              />
            )}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="面积（m²）">
            {form.getFieldDecorator('Area', {
              initialValue: 0,
              rules: [
                { validator: decimalValidator, message: '小数点最多保留两位！' },
                { required: false },
              ],
            })(
              <InputNumber
                style={{ width: '100%' }}
                step={0.01}
                placeholder="请输入"
              />
            )}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="侧石（m）">
            {form.getFieldDecorator('CS', {
              initialValue: 0,
              rules: [
                { validator: decimalValidator, message: '小数点最多保留两位！' },
                { required: false },
              ],
            })(<InputNumber style={{ width: '100%' }} step={0.01} placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="平石（m）">
            {form.getFieldDecorator('PS', {
              initialValue: 0,
              rules: [
                { validator: decimalValidator, message: '小数点最多保留两位！' },
                { required: false },
              ],
            })(<InputNumber style={{ width: '100%' }} step={0.01} placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="来源">
            {form.getFieldDecorator('Source', { initialValue: '任务单' })(
              <Select style={{ width: '100%' }}>
                {sourceList.length > 0
                  ? sourceList.map(item => {
                      return (
                        <Option key={item.Id} value={item.Alias}>
                          {item.Title}
                        </Option>
                      );
                    })
                  : null}
              </Select>
            )}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="损坏情况">
            {form.getFieldDecorator('DamageCondition')(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label="完成日期">
            {form.getFieldDecorator('CompleteDate', {
              rules: [{ required: true, message: '完成日期不能为空！' }],
            })(<DatePicker style={{ width: '100%' }} />)}
          </FormItem>
        </Col>
        <Col span={24}>
          <FormItem className="mode" label="维修方式" {...formItemFullLayout}>
            {form.getFieldDecorator('MaintainMode')(<TextArea placeholder="请输入" />)}
          </FormItem>
        </Col>
      </Row>
    </Modal>
  );
});

@Form.create()
@connect(({ maintain, config, loading, global }) => ({
  currentUrl: global.currentUrl,
  elementAuth: global.elementAuth,
  yhdwList: maintain.yhdwList,
  rxdList: maintain.rxdList,
  rxdData: maintain.rxddata,
  sourceProblems: config.sourceProblem,
  loading: loading.effects['maintain/fetchRXD'],
}))
class MaintainRXD extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      modalReportVisible: false,
      modalEditVisible: false,
      modalDetailsVisible: false,
      autoCompleteRoadName: [],
    };

    this.user_id = sessionStorage.getItem('user_id');
  }

  //获取数据
  getData(queryName, querySource, groupId,queryDate) {
    // const author = getAuthority();
    const { dispatch } = this.props;
    dispatch({
      type: 'config/fetchSourceProblem',
    });

    dispatch({
      type: 'maintain/fetchGetCompany',
      payload: {
        type: '养护维修',
      },
      callback: response => {
        if (response.ErrorMessage) {
          message.error.error('获取失败');
          console.log(response.ErrorMessage);
        }
      },
    });

    dispatch({
      type: 'maintain/fetchRXD',
      payload: {
        queryName: queryName,
        querySource: querySource,
        groupId: groupId,
        bDate: queryDate != '' ? queryDate[0].format('YYYY-MM-DD') : '',
        eDate: queryDate != '' ? queryDate[1].format('YYYY-MM-DD') : '',
      },
    });
  }

  getAuth = () => {
    const { dispatch, currentUrl } = this.props;
    dispatch({
      type: 'global/fetchAuthorityElements',
      payload: { url: currentUrl },
    });
  };

  componentWillMount() {
    this.getData('', '', '','');
    this.getAuth();
  }

  //查询
  queryList() {
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        this.getData(
          values.RoadName ? values.RoadName : '',
          values.Source ? values.Source : '',
          values.Group ? values.Group : '',
          values.ComplateDate ? values.ComplateDate : ''
        );
      }
    });
  }

  //重置
  resetData() {
    const { form } = this.props;
    this.props.form.setFieldsValue({
      RoadName: '',
      Source: '',
      Group:'',
      ComplateDate:'',
    });
    this.getData('', '', '','');
  }

  //上报
  handleReportModalVisible(flag) {
    this.setState({
      modalReportVisible: !!flag,
    });
  }

  //道路名补全
  handleSearchAutoRoad(value) {
    const { dispatch } = this.props;
    dispatch({
      type: 'config/fetchAutoCompleteRoadName',
      payload: { queryStr: value },
      callback: response => {
        this.setState({ autoCompleteRoadName: [...response] });
      },
    });
  }

  handleReportAdd(fields) {
    const { dispatch } = this.props;

    const params = {
      RoadName: fields.RoadName,
      Position: fields.Position,
      Long: fields.Long,
      Wide: fields.Wide,
      Area: fields.Area,
      CS: fields.CS,
      PS: fields.PS,
      Source: fields.Source,
      DamageCondition: fields.DamageCondition,
      MaintainMode: fields.MaintainMode,
      CompleteDate: fields.CompleteDate ? fields.CompleteDate.format('YYYY/MM/DD') : undefined,
      UserId: this.user_id,
    };

    dispatch({
      type: 'maintain/addRXD',
      payload: {
        rxd: params,
      },
      callback: response => {
        if (response.status) {
          message.success('添加成功');
        } else {
          message.error(response.ErrorMessage);
        }

        this.handleReportModalVisible();
        this.getData('', '', '','');
      },
    });
  }

  //详情详情
  handleDetailsModalVisible(flag) {
    this.setState({
      modalDetailsVisible: !!flag,
    });
  }

  handleDetails(record) {
    const { dispatch } = this.props;
    dispatch({
      type: 'maintain/getRXD',
      payload: {
        id: record.Id,
      },
      callback: response => {
        if (!response.ErrorMessage) {
          this.handleDetailsModalVisible(true);
        } else {
          message.error(response.ErrorMessage);
        }
      },
    });
  }

  //编辑
  handleEditModalVisible(flag) {
    this.setState({
      modalEditVisible: !!flag,
    });
  }

  handleEdit(record) {
    const { dispatch } = this.props;
    dispatch({
      type: 'maintain/getRXD',
      payload: {
        id: record.Id,
      },
      callback: response => {
        if (!response.ErrorMessage) {
          this.handleEditModalVisible(true);
        } else {
          message.error(response.ErrorMessage);
        }
      },
    });
  }

  handleReportEdit(fields) {
    const { dispatch } = this.props;
    const params = {
      Id: fields.Id,
      RoadName: fields.RoadName,
      Position: fields.Position,
      Long: fields.Long,
      Wide: fields.Wide,
      Area: fields.Area,
      CS: fields.CS,
      PS: fields.PS,
      Source: fields.Source,
      DamageCondition: fields.DamageCondition,
      MaintainMode: fields.MaintainMode,
      CompleteDate: fields.CompleteDate ? fields.CompleteDate.format('YYYY/MM/DD') : undefined,
    };

    dispatch({
      type: 'maintain/editRXD',
      payload: {
        rxd: params,
      },
      callback: response => {
        if (response.status) {
          message.success('修改成功');
        } else {
          message.error(response.ErrorMessage);
        }

        this.handleEditModalVisible();
        this.getData('', '', '','');
      },
    });
  }

  handleDelete(record) {
    const { dispatch } = this.props;

    dispatch({
      type: 'maintain/removeRXD',
      payload: {
        id: record.Id,
      },
      callback: response => {
        if (response.status) {
          message.success('删除成功');
        } else {
          message.error(response.ErrorMessage);
        }

        this.getData('', '', '','');
      },
    });
  }

  handleRollback(record){
    const { dispatch } = this.props;

    dispatch({
      type: 'maintain/rollbackRXD',
      payload: {
        id: record.Id,
      },
      callback: response => {
        if (response.status) {
          message.success('退回成功');
        } else {
          message.error(response.ErrorMessage);
        }

        this.getData('', '', '','');
      },
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    const { loading, rxdList, rxdData, sourceProblems, yhdwList, elementAuth } = this.props;
    const groupList = [{ Id: '', Name: '全部' }, ...yhdwList];
    const sourceProblemList = [{ Id: '', Alias: '', Title: '全部' }, ...sourceProblems];
    const reportMethods = {
      handleSearchRoad: this.handleSearchAutoRoad.bind(this),
      handleAdd: this.handleReportAdd.bind(this),
      handleModalVisible: this.handleReportModalVisible.bind(this),
    };

    const editMethods = {
      handleSearchRoad: this.handleSearchAutoRoad.bind(this),
      handleEdit: this.handleReportEdit.bind(this),
      handleModalVisible: this.handleEditModalVisible.bind(this),
    };

    const cols = [
      {
        title: '道路名称',
        dataIndex: 'RoadName',
        key: 'RoadName',
      },
      {
        title: '详细位置',
        dataIndex: 'Position',
        key: 'Position',
      },
      {
        title: '长（m）',
        dataIndex: 'Long',
        key: 'Long',
        render: text => <span>{text > 0 ? text : '-'}</span>,
      },
      {
        title: '宽（m）',
        dataIndex: 'Wide',
        key: 'Wide',
        render: text => <span>{text > 0 ? text : '-'}</span>,
      },
      {
        title: '面积（m²）',
        dataIndex: 'Area',
        key: 'Area',
        render: text => <span>{text > 0 ? text : '-'}</span>,
      },
      {
        title: '侧石（m）',
        dataIndex: 'CS',
        key: 'CS',
        render: text => <span>{text > 0 ? text : '-'}</span>,
      },
      {
        title: '平石（m）',
        dataIndex: 'PS',
        key: 'PS',
        render: text => <span>{text > 0 ? text : '-'}</span>,
      },
      {
        title: '来源',
        dataIndex: 'Source',
        key: 'Source',
      },
      {
        title: '损坏情况',
        dataIndex: 'DamageCondition',
        key: 'DamageCondition',
      },
      {
        title: '维修方式',
        dataIndex: 'MaintainMode',
        key: 'MaintainMode',
      },
      {
        title: '完成日期',
        dataIndex: 'CompleteDate',
        key: 'CompleteDate',
        render: text => <span>{formatMDate(text)}</span>,
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <a href="javascrips:;" onClick={this.handleDetails.bind(this, record)}>
              <Icon type="table" />
              详情
            </a>
            <Authorized authority={elementAuth['btnReport']}>
              <Divider type="vertical" />
              <a href="javascrips:;" onClick={this.handleEdit.bind(this, record)}>
                <Icon type="edit" />
                编辑
              </a>
              <Divider type="vertical" />
              <Popconfirm title="确定删除?" onConfirm={this.handleDelete.bind(this, record)}>
                <a href="javascript:;">
                  <Icon type="delete" />
                  删除
                </a>
              </Popconfirm>
            </Authorized>
            <Authorized authority={elementAuth['selectOrg']}>
              <Divider type="vertical" />
              <a href="javascrips:;" onClick={this.handleRollback.bind(this, record)}>
                <Icon type="rollback" />
                退回
              </a>
            </Authorized>
          </span>
        ),
      },
    ];

    return (
      <Fragment>
        <Card style={{ margin: '10px' }}>
          <Form layout="inline">
            <FormItem label="道路名称">
              {getFieldDecorator('RoadName')(
                <Input placeholder="查询名称" style={{ width: '200px' }} />
              )}
            </FormItem>
            <FormItem label="日期">{getFieldDecorator('ComplateDate')(<RangePicker />)}</FormItem>
            <FormItem label="问题来源">
              {getFieldDecorator('Source', { initialValue: '' })(
                <Select style={{ width: 120 }}>
                  {sourceProblemList.length > 0
                    ? sourceProblemList.map(item => {
                        return (
                          <Option key={item.Id} value={item.Alias}>
                            {item.Title}
                          </Option>
                        );
                      })
                    : null}
                </Select>
              )}
            </FormItem>
            <Authorized authority={elementAuth['selectOrg']}>
              <FormItem label="养护单位">
                {getFieldDecorator('Group', { initialValue: '' })(
                  <Select style={{ width: 160 }}>
                    {groupList.length > 0
                      ? groupList.map(item => {
                          return (
                            <Option key={item.Id} value={item.Id}>
                              {item.Name}
                            </Option>
                          );
                        })
                      : null}
                  </Select>
                )}
              </FormItem>
            </Authorized>
            <FormItem>
              <Button type="primary" onClick={this.queryList.bind(this)}>
                查询
              </Button>
            </FormItem>
            <FormItem>
              <Button onClick={this.resetData.bind(this, '')}>重置</Button>
            </FormItem>
            <Authorized authority={elementAuth['btnReport']}>
              <FormItem>
                <Button type="primary" onClick={() => this.handleReportModalVisible(true)}>
                  上报
                </Button>
              </FormItem>
            </Authorized>
          </Form>
        </Card>
        <Card
          title={
            <span style={{ borderLeft: '4px solid #3CB371', paddingLeft: '10px' }}>
              人行道养护上报信息
            </span>
          }
          style={{ margin: '10px' }}
        >
          <Table bordered size="small" loading={loading} dataSource={rxdList} columns={cols} />
        </Card>
        <ReportForm
          {...reportMethods}
          modalVisible={this.state.modalReportVisible}
          roadNameList={this.state.autoCompleteRoadName}
          sourceList={sourceProblems}
        />
        <EditForm
          {...editMethods}
          modalVisible={this.state.modalEditVisible}
          data={rxdData}
          roadNameList={this.state.autoCompleteRoadName}
          sourceList={sourceProblems}
          rowKey="Id"
        />
        <Modal
          width={800}
          destroyOnClose
          title="数据详情"
          visible={this.state.modalDetailsVisible}
          onCancel={() => this.handleDetailsModalVisible()}
          footer={null}
        >
          <Descriptions bordered column={2}>
            <Descriptions.Item label="道路名称">
              {rxdData.Data != undefined ? rxdData.Data.RXD.RoadName : null}
            </Descriptions.Item>
            <Descriptions.Item label="详细位置">
              {rxdData.Data != undefined ? rxdData.Data.RXD.Position : null}
            </Descriptions.Item>
            <Descriptions.Item label="长（m）">
              {rxdData.Data != undefined ? rxdData.Data.RXD.Long : null}
            </Descriptions.Item>
            <Descriptions.Item label="宽（m）">
              {rxdData.Data != undefined ? rxdData.Data.RXD.Wide : null}
            </Descriptions.Item>
            <Descriptions.Item label="面积(m²)">
              {rxdData.Data != undefined ? rxdData.Data.RXD.Area : null}
            </Descriptions.Item>
            <Descriptions.Item label="侧石（m)">
              {rxdData.Data != undefined ? rxdData.Data.RXD.CS : null}
            </Descriptions.Item>
            <Descriptions.Item label="平石（m)">
              {rxdData.Data != undefined ? rxdData.Data.RXD.PS : null}
            </Descriptions.Item>
            <Descriptions.Item label="来源">
              {rxdData.Data != undefined ? rxdData.Data.RXD.Source : null}
            </Descriptions.Item>
            <Descriptions.Item label="损坏情况">
              {rxdData.Data != undefined ? rxdData.Data.RXD.DamageCondition : null}
            </Descriptions.Item>
            <Descriptions.Item label="完成日期">
              {rxdData.Data != undefined
                ? moment.unix(rxdData.Data.RXD.CompleteDate.slice(6, -5)).format('YYYY/MM/DD')
                : null}
            </Descriptions.Item>
            <Descriptions.Item label="维修方式">
              {rxdData.Data != undefined ? rxdData.Data.RXD.MaintainMode : null}
            </Descriptions.Item>
          </Descriptions>
        </Modal>
      </Fragment>
    );
  }
}

export default MaintainRXD;
